<template>
  <div class="li-jian">
    <div class="header">
      <span>当前位置：</span>
      <span style="color: #44ABF7;">满额立减设置</span>
    </div>
    <div class="content">
      <div class="con-mar">
        <div class="ipt-box">
          <el-form :inline="true" v-for="(domain, index) in from.formInline" :model="from" class="demo-form-inline">
            <el-form-item label="单笔订单满">
              <el-input v-model="domain.man" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="元立减">
              <el-input v-model="domain.jian" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="元">
            </el-form-item>
            <el-button v-if="from.formInline.length > 1" @click.prevent="removeDomain(domain)">删除</el-button>
          </el-form>
        </div>
        <div class="add">
          <el-button @click="addDomain">增加优惠项</el-button>
        </div>
        <div class="err">
          两项都填写才能生效
        </div>
        <div style="width: 100%;margin-top: 20px;">
          <el-button @click="baocun" type="primary">保存设置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      from: {
        formInline: [
          {
            man: '',
            jian: '',
          }
        ]
      }
    }
  },
  methods: {
    removeDomain(item) {
      var index = this.from.formInline.indexOf(item)
      if (index !== -1) {
        this.from.formInline.splice(index, 1)
      }
    },
    baocun() {
      console.log(this.from);
    },
    addDomain() {
      this.from.formInline.push({
        value: '',
        // key: Date.now()
      });
    }
  }
}
</script>

<style scoped>
.li-jian {
  overflow: hidden;
  width: 70%;
  padding: 20px 0;
  background-color: #F5F7F9;
  margin-top: 30px;
}

.header {
  width: 95%;
  font-size: 14px;
  margin: 0 auto;
  border-left: 3px solid #44ABF7;
  text-indent: 5px;
}

.content {
  width: 95%;
  margin: 20px auto;
  padding: 50px 0;
  background-color: #fff;
}

.con-mar {
  width: 95%;
  margin: 0 auto;
}

.item-span {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 3px;
  color: rgb(56, 56, 56);
}

.item-ipt {
  border: 1px solid #ccc;
  /* padding: 10px; */
  height: 40px;
  border-radius: 3px;
  color: rgb(56, 56, 56);
}

.ipt-box {
  width: 100%;
  /* height: 40px; */
}

.add {
  width: 100%;
  margin-top: 20px;
}

.add span {
  padding: 10px;
  height: 40px;
  border-radius: 3px;
  color: rgb(56, 56, 56);
  border: 1px solid #ccc;
}

.err {
  width: 100%;
  margin-top: 20px;
  color: rgb(254, 51, 51);
  font-size: 12px;
  font-weight: bold;
}
</style>